<template>
  <view class="container">
    <!-- 头部信息 -->
    <view class="header">
      <view class="user-info">
        <text class="user-name">用户：{{ userName || '未知用户' }}</text>
        <text class="season-info">第 {{ seasonId }} 赛季</text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-icon">
        <uni-icons type="spinner-cycle" size="36" color="#409EFF" />
      </view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 记录列表 -->
    <view v-else class="record-list">
      <view 
        v-for="(item, index) in records" 
        :key="item.id" 
        class="record-item"
      >
        <!-- 左侧图标 -->
        <view class="record-icon">
          <uni-icons 
            :type="getIconType(item.type)" 
            size="32" 
            :color="item.status === '1' ? '#409EFF' : '#999'"
          />
        </view>

        <!-- 中间内容 -->
        <view class="record-content">
          <text class="record-type">{{ getTypeText(item.type) }}</text>
          <text class="record-score">+{{ item.score }} 积分</text>
          <text class="record-date">{{ item.applyDate }}</text>
          <text class="record-desc">{{ item.description || '无描述' }}</text>
        </view>

        <!-- 右侧状态 -->
        <view class="record-status">
          <view 
            v-if="item.status === '1'" 
            class="status-badge success"
          >
            <uni-icons type="checkmark-circle" size="24" color="#47B960" />
            <text>已通过</text>
          </view>
          <view 
            v-else 
            class="status-badge failed"
          >
            <uni-icons type="close-circle" size="24" color="#ff6b6b" />
            <text>未通过</text>
          </view>
        </view>
      </view>

      <!-- 空数据提示 -->
      <view v-if="records.length === 0" class="empty-tip">
        <image src="/static/empty-record.png" class="empty-img" />
        <text>暂无该赛季的积分申请记录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {  onLoad } from '@dcloudio/uni-app'
import { http } from '../../../utils/requestUtil'
import { computed, ref } from 'vue'

// 响应式数据
const userId = ref('')
const seasonId = ref('')
const userName = ref('')
const records = ref([])
const loading = ref(true)

// 积分类型映射
const typeMapping = computed(() => ({
  'project': { text: '项目积分', icon: 'folder' },
  'activity': { text: '活动积分', icon: 'calendar' },
  'training': { text: '培训积分', icon: 'book' } // 新增培训积分类型
}))

// 获取积分类型文本
const getTypeText = (type) => {
  return typeMapping.value[type]?.text || '未知类型'
}

// 获取积分类型图标
const getIconType = (type) => {
  return typeMapping.value[type]?.icon || 'help'
}

onLoad(async (option) => {
  try {
    userId.value = option.userId || ''
    seasonId.value = option.seasonId || ''
    userName.value = option.name || '未知用户'
    
    if (!userId.value || !seasonId.value) {
      throw new Error('缺少用户ID或赛季ID')
    }
    
    const res = await http.get('/bole/application/list', {
      userId: userId.value,
      seasonId: seasonId.value,
      status: 1
    })
    
    console.log('积分记录数据:', res)
    
    if (res.code === 200 && res.rows) {
      records.value = res.rows
    } else {
      throw new Error(res.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('数据加载失败:', error)
    uni.showToast({
      title: error.message || '加载失败，请重试',
      icon: 'none',
      duration: 3000
    })
  } finally {
    loading.value = false
  }
})
</script>


<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.header {
  margin-bottom: 20rpx;
  padding: 24rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #333;
}

.season-info {
  color: #409EFF;
  font-weight: 500;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-icon {
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 32rpx;
  color: #999;
}

.record-list {
  gap: 20rpx;
}

.record-item {
  display: flex;
  align-items: flex-start;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
  margin-bottom: 20rpx;
}

.record-item:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.1);
}

.record-icon {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.record-content {
  flex: 1;
  margin-right: 20rpx;
}

.record-type {
  font-size: 34rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 8rpx;
}

.record-score {
  font-size: 38rpx;
  color: #ff6b6b;
  font-weight: bold;
  margin-right: 12rpx;
}

.record-date {
  font-size: 28rpx;
  color: #999;
}

.record-desc {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
  margin-top: 12rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 160rpx;
}

.status-badge {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
}

.status-badge.success {
  background-color: #e8f5e9;
  color: #47B960;
}

.status-badge.failed {
  background-color: #ffebee;
  color: #ff6b6b;
}

.status-badge text {
  margin-left: 8rpx;
}

.empty-tip {
  padding: 100rpx 0;
  text-align: center;
}

.empty-img {
  width: 300rpx;
  height: 300rpx;
  opacity: 0.5;
  margin-bottom: 20rpx;
}

.empty-tip text {
  font-size: 32rpx;
  color: #999;
}
</style>